<template>
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<view class="popup_con">
			<view class="fixedTitle_oblation">
				<view class="left"></view>
				<view class="middle">全部留言</view>
				<view class="right">
					<u-icon @click="closeMore" class="close" name="close" color="black" size="20"></u-icon>
				</view>
			</view>
			<mescroll-uni :height="height + 'px'" :up="upOption" @init="mescrollInit" @down="myDownCallback"
				@up="upCallback">
				<view class="leaveMess_list">
					<view class="leaveMess_item" v-for="(item, index) in messageList">
						<image :src="item.headUrl" mode=""></image>
						<view style="flex: 1">
							<view class="leaveMess_item_name">
								{{item.nickname}}
								<u-icon name="trash" @click="del(item)" color="#0E0E0E" size="23"
									v-if="userId==item.userId"></u-icon>
							</view>
							<view class="leaveMess_item_mess">{{item.message}}</view>
							<view class="leaveMess_item_time">
								{{item.dateTimeStr}}
								<view class="display_flex">
									<u-icon v-if="item.whetherLike==0||item.whetherLike==2" @click="setLike(item)"
										name="heart" color="#0E0E0E" size="23"></u-icon>
									<u-icon v-else @click="setLike(item)" name="heart-fill" color="rgb(237,85,100)"
										size="23"></u-icon>
									<view class="leaveMess_item_love">{{item.likeNumber}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
			<view class="leaveMess_footerBox">
				<view class="leaveMess_footerBox_contain"></view>
				<view class="leaveMess_footerBox_fixed" @click="showLeaveMess">
					<view class="leaveMess_footerBox_fixed_box">发一条友善的留言吧</view>
				</view>
			</view>
		</view>
	</u-popup>

	<!-- 留言弹框 -->
	<leaveMess2 ref="leaveMess2Ref" @closeMess="closeMore" @query='query'></leaveMess2>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import leaveMess2 from './leaveMess2.vue';
	import _ from "lodash"
	import HomeApi from '@/API/home/index.js';
	const homeApi = new HomeApi();

	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(); // 调用mescroll的hook
	const upOption = {
		page: {
			size: 10 // 每页数据的数量
		},
		noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
		empty: {
			// use: false //不显示空图
		}
	};
	let userId = uni.getStorageSync('userInfo').userId;
	const lastId = ref(0); //最后一个元素的id
	const messageList = ref([]);
	const isLove = ref(false);
	const leaveMess2Ref = ref(null);
	const show = ref(false);
	let height = ref(500);

	function removeTimezone(dateString) {
		const parts = dateString.split(' ');
		const result = parts.slice(0, 2).join(' ');
		return result;
	}
	const query = (() => {
		lastId.value = 0
		getMescroll().resetUpScroll()
	})
	const showLeaveMess = () => {
		leaveMess2Ref.value.show = true;
	};

	const closeMore = () => {
		show.value = false;
	};
	const del = (item) => {
		homeApi.deleteMessageBoardApi({
			belongingTo: uni.getStorageSync('hallId') ? 2 : 3,
			messageId: item.messageId,
			correspondingId: uni.getStorageSync('hallId') || uni.getStorageSync('memorialServiceId')
		}).then((res) => {
			lastId.value = 0
			getMescroll().resetUpScroll()
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}).catch(() => {})
	}
	const setLike = _.throttle(function(item) {
		if (item.whetherLike == 1) {
			item.whetherLike = 0
			homeApi.likeMessageBoardApi({
				messageId: item.messageId,
				opType: 2
			}).then((res) => {
				item.likeNumber--
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}).catch(() => {})
		} else {
			item.whetherLike = 1
			homeApi.likeMessageBoardApi({
				messageId: item.messageId,
				opType: 1
			}).then((res) => {
				item.likeNumber++
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}).catch(() => {})
		}
	}, 1000);
	/**
	 * 上拉加载
	 */
	const upCallback = (mescroll) => {
		homeApi.getMessageBoardListApi({
				belongingTo: uni.getStorageSync('hallId') ? 2 : 3,
				correspondingId: uni.getStorageSync('hallId') || uni.getStorageSync('memorialServiceId'),
				latestId: lastId.value
			})
			.then((res) => {
				const curPageData = res.data.messageBoardList || []; // 当前页数据
				if (lastId.value === 0) messageList.value = []; //如果是第一页需手动制空列表
				curPageData.forEach((item) => {
					item.dateTimeStr = removeTimezone(item.dateTimeStr) || timeFormat(item.dateTimeStr,
						'yyyy-mm-dd hh:MM:ss');
				})
				messageList.value = messageList.value.concat(curPageData); //追加新数据\
				if (curPageData.length > 0) {
					lastId.value = curPageData[curPageData.length - 1].messageId;
				}
				mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			})
			.catch(() => {
				mescroll.endErr(); // 请求失败, 结束加载
			});
	};

	const myDownCallback = (mescroll) => {
		lastId.value = 0;
		downCallback();
	};

	defineExpose({
		show
	});
</script>

<style lang="scss">
	::v-deep.u-popup__content {
		padding: 0 !important;
	}

	.popup_con {
		background: url('http://112.124.50.179:8888/imgs/home/popbg.png') no-repeat;
		background-size: 100% 120%;
		background-position: top;
	}

	.fixedTitle_oblation {
		width: 100%;
		font-size: 32rpx;
		color: #156778;
		padding-top: 60rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left,
		.right {
			width: 100rpx;
			flex-shrink: 0;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			padding-right: 32rpx;
			box-sizing: border-box;
		}

		.middle {
			flex: 1;
			text-align: center;
		}
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}

	.leaveMess_list {
		width: 100%;
		padding: 54rpx 32rpx 0 32rpx;
		box-sizing: border-box;

		.leaveMess_item {
			width: 100%;
			margin-bottom: 38rpx;
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid #f5f5f5;
			display: flex;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}

			.leaveMess_item_name {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.leaveMess_item_mess {
				font-weight: 400;
				font-size: 30rpx;
				color: #0e0e0e;
				line-height: 45rpx;
				margin-bottom: 32rpx;
			}

			.leaveMess_item_time {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.leaveMess_item_love {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 30rpx;
				width: 30rpx;
			}
		}
	}

	.leaveMess_footerBox {
		.leaveMess_footerBox_contain {
			height: 112rpx;
		}

		.leaveMess_footerBox_fixed {
			width: 100%;
			position: fixed;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leaveMess_footerBox_fixed_box {
				width: 100%;
				height: 72rpx;
				background: #ffffff;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				border: 2rpx solid #39a2a1;
				opacity: 0.5;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 72rpx;
				padding-left: 32rpx;
				box-sizing: border-box;
			}
		}
	}
</style>